<template>
	<div class="side-menu-wrapper">
		<slot></slot>
		<Menu
			ref="menu"
			v-show="!collapsed"
			:active-name="activeName"
			:open-names="openedNames"
			:accordion="accordion"
			:theme="theme"
			width="auto"
			@on-select="handleSelect"
		>
			<template v-for="item in menuList">
				<template v-if="item.children && item.children.length === 1">
					<side-menu-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item"></side-menu-item>
					<menu-item v-else :name="getNameOrHref(item, true)" :key="`menu-${item.children[0].name}`"
						><common-icon :type="item.children[0].icon || ''" /><span>{{ showTitle(item.children[0]) }}</span></menu-item
					>
				</template>
				<template v-else>
					<side-menu-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item"></side-menu-item>
					<menu-item v-else :name="getNameOrHref(item)" :key="`menu-${item.name}`"
						><common-icon :type="item.icon || ''" /><span>{{ showTitle(item) }}</span></menu-item
					>
				</template>
			</template>
		</Menu>
		<div class="menu-collapsed" v-show="collapsed" :list="menuList">
			<template v-for="item in menuList">
				<collapsed-menu
					v-if="item.children && item.children.length > 1"
					@on-click="handleSelect"
					hide-title
					:root-icon-size="rootIconSize"
					:icon-size="iconSize"
					:theme="theme"
					:parent-item="item"
					:key="`drop-menu-${item.name}`"
				></collapsed-menu>
				<Tooltip
					transfer
					v-else
					:content="showTitle(item.children && item.children[0] ? item.children[0] : item)"
					placement="right"
					:key="`drop-menu-${item.name}`"
				>
					<a @click="handleSelect(getNameOrHref(item, true))" class="drop-menu-a" :style="{ textAlign: 'center' }"
						><common-icon :size="rootIconSize" :color="textColor" :type="item.icon || (item.children && item.children[0].icon)"
					/></a>
				</Tooltip>
			</template>
		</div>
	</div>
</template>
<script>
import SideMenuItem from './side-menu-item.vue';
import CollapsedMenu from './collapsed-menu.vue';
import { getUnion } from '@/libs/tools';
import mixin from './mixin';

export default {
	name: 'SideMenu',
	mixins: [mixin],
	components: {
		SideMenuItem,
		CollapsedMenu
	},
	props: {
		menuList: {
			type: Array,
			default() {
				return [];
			}
		},
		collapsed: {
			type: Boolean
		},
		theme: {
			type: String,
			default: 'dark'
		},
		rootIconSize: {
			type: Number,
			default: 20
		},
		iconSize: {
			type: Number,
			default: 16
		},
		accordion: Boolean,
		activeName: {
			type: String,
			default: ''
		},
		openNames: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			openedNames: []
		};
	},
	methods: {
		handleSelect(name) {
			this.$emit('on-select', name);
		},
		getOpenedNamesByActiveName(name) {
			return this.$route.matched.map(item => item.name).filter(item => item !== name);
		},
		updateOpenName(name) {
			if (name === this.$config.homeName) this.openedNames = [];
			else this.openedNames = this.getOpenedNamesByActiveName(name);
		}
	},
	computed: {
		textColor() {
			return this.theme === 'dark' ? '#fff' : '#495060';
		}
	},
	watch: {
		activeName(name) {
			if (this.accordion) this.openedNames = this.getOpenedNamesByActiveName(name);
			else this.openedNames = getUnion(this.openedNames, this.getOpenedNamesByActiveName(name));
		},
		openNames(newNames) {
			this.openedNames = newNames;
		},
		openedNames() {
			this.$nextTick(() => {
				this.$refs.menu.updateOpened();
			});
		}
	},
	mounted() {
		this.openedNames = getUnion(this.openedNames, this.getOpenedNamesByActiveName(name));
	}
};
</script>
<style lang="less">
@import './side-menu.less';
</style>
